<template>
  <div class="topnav-item">
    <div class="topnav-label">{{label}}</div>
    <div v-if="drop" class="topnav-down"></div>
    <div class="topnav-img" :class="name" >
      <div v-if="name=='avatar'" class="avatars" v-bind:style="{backgroundImage:'url('+photo+')'}"></div>
      <!--<div v-if="name=='bell'" class="avatars bell"></div>-->
      <div v-if="notify" class="topnav-notify">{{parseInt(notify) < 99 ? notify : '99+'}}</div> 
    </div>
  </div>
</template>

<script>
export default {
  name: 'top-nav-item',
  props: ['name', 'notify', 'label', 'drop'],
  data(){
    return{
      head:true
    }
  },
  computed:{
    photo:function(){
      return this.$store.state.personal.photo
    }
  }
}
</script>

<style lang="stylus" scoped>
.topnav-item
  float left
  margin-right 2rem
  cursor pointer
  &:nth-last-child(1)
    margin-right 0

.topnav-img
.topnav-label
.topnav-down
  float left

.topnav-img
  width 2.12rem
  height 2.12rem
  position relative
  margin-right .5rem

.guide
  background-image: url(./img/guide.png)
  background-repeat: no-repeat
  background-size 100%
  background-position 0 3px
.set
    background-image: url(./img/set.png)
    background-repeat: no-repeat
    background-size cover
.topnav-label
  color #3d3d3d
  font-size 0.88rem
  line-height 2.12rem
.avatars
  border-radius 50%
  height 100%
  width 100%
  background-size 100%
  transform scale(1.4) translateX(5px)

.topnav-down
  margin-top 0.95rem
  margin-left 0.30rem
  margin-right 0.5rem
  box-sizing border-box
  width 0.64rem
  height 0.64rem
  border 0.32rem solid transparent
  border-top-color #3d3d3d

.bell
  background url('./img/bell.png') no-repeat
.topnav-notify
  position absolute
  top -5px
  left 50%
  background-color #ef4b4b
  padding 2px 5px
  border-radius 50%
  font-size 12px
  color #fff


</style>
